<template >
  <div class="app">
      <div>
         <video_Head :title="title"/>
      </div>
      <div>
         <Video_Head_Control_Real @clientId="getClientId"/>
      </div>
      <div class="content">
          <dv-border-box-8 class="left"  :color="['#18213e','#18213e']">
              <Real_time_map class="gd_com_map" :clientId="clientId" v-if="fag"></Real_time_map>
          </dv-border-box-8>
          <dv-border-box-8 class="right"  :color="['#18213e','#18213e']">
              <div class="realtime" v-for="(item, index) in realTimeUrl" :key="index">
                  <div style="height: 41vh;">
                      <Customize_flv :url="item" :channel="index+1" v-if="fag"/>
                    </div>
              </div>
          </dv-border-box-8>
      </div>
  </div>
</template>
  
<script>

import api from "@/api/api";
import Video_Head_Control_Real from "@/components/video/Video_Head_Control_Real"
import Customize_flv from "@/components/video/Customize_Flv";
import Real_time_map from "@/components/video/Real_Time_Map"
import { ElNotification } from 'element-plus';
import video_Head from "@/components/video/Video_head"
export default {
  props: {

  },
  components: { Customize_flv, Video_Head_Control_Real,Real_time_map,video_Head },
  data: function () {
      return {
         title:"flv实时视频",
          fag: false,
          clientId: "",
          mediaType: 1,
          realTimeUrl: [],
          url: [],
          PlayDistinctValue:1
         
      }
  },
  watch: {
     
  },
  created() {
      
  },
  methods: {
      getplay() {
        if (this.url.length <= 0) {
              ElNotification({ title: '错误', message: '获取视频失败', type: 'error', })
              return;
          }
          this.realTimeUrl = this.sort(this.url);
      },
      sort(value){
          // 提取链接中的最后一个数字，并与链接一起存储为键值对
          const sortedLinks = value.map(link => {
          const lastNumber = parseInt(link.split('-').pop());
            return { link, lastNumber };
          });
          // 按最后一个数字进行排序
          sortedLinks.sort((a, b) => a.lastNumber - b.lastNumber);
          // 仅输出排序后的链接
          return sortedLinks.map(obj => obj.link);
      },
      getClientId(val){
          this.fag = false;
          this.clientId=val[0];
          this.PlayDistinctValue=val[1];
          this.fag = true
          this.realTimeUrl = [];
          this.url = [];
          for (var i = 1; i < 5; i++) {
              api.getRealTimeVideo(this.clientId, i, this.mediaType, this.PlayDistinctValue).then(res=>{
              if (res.code == 0) {
                if (i==1) {
                    ElNotification({ title: '成功', message: '等待视频播放', type: 'success', })
                }
                this.url.push(res.data.url);
              } else {
                  ElNotification({ title: '警告', message: res.msg, type: 'warning', })
                  return;
              }
            })
          }
          setTimeout(res => this.getplay(), 500)
      }

  }
}

</script>
<style scoped>
/* 控制按钮 */
.app{
 height: 100vh;
 background-image: url("../../assets/img/pageBg.png");
}
.content {
  margin-top: 10px;
  clear: both;
  width: 100%;
  height: 82vh;

}
.gd_com_map {
    margin-top: 1.5%;
    margin-left: 1.5%;
    width: 97%;
    height: 97%;
}
.left {
  width: 45%;
  height: 82vh;
  background-color: #10191b;
  float: left;
  margin-left: 1%;
}

.right {
  float: right;
  width: 52%;
  height: 82vh;
  margin-right: 1%;
  background-color: #10191b;
  text-align: center;
}
.line{
  height: 30px;
 
}
.realtime {
  width: 50%;
 
  float: left;
  text-align: center;
}
</style>
  